<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="退款金额" prop="refundAmount">
        <el-input v-model="queryParams.refundAmount" placeholder="请输入退款金额" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="实际金额" prop="realAmount">
        <el-input v-model="queryParams.realAmount" placeholder="请输入实际金额" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="商品编码" prop="backProductCode">
        <el-input v-model="queryParams.backProductCode" placeholder="请输入商品编码" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="商品名称" prop="backProductName">
        <el-input v-model="queryParams.backProductName" placeholder="请输入商品名称" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="商品数量" prop="backProductNum">
        <el-input v-model="queryParams.backProductNum" placeholder="请输入商品数量" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="商品主图" prop="backMainPic">
        <el-input v-model="queryParams.backMainPic" placeholder="请输入商品主图" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="商品规格" prop="backSpecification">
        <el-input v-model="queryParams.backSpecification" placeholder="请输入商品规格" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="省" prop="province">
        <el-input v-model="queryParams.province" placeholder="请输入省" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="市" prop="city">
        <el-input v-model="queryParams.city" placeholder="请输入市" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="县/区" prop="county">
        <el-input v-model="queryParams.county" placeholder="请输入县/区" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="乡村/街道" prop="village">
        <el-input v-model="queryParams.village" placeholder="请输入乡村/街道" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="收货人" prop="addressUser">
        <el-input v-model="queryParams.addressUser" placeholder="请输入收货人" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="联系方式" prop="addressPhone">
        <el-input v-model="queryParams.addressPhone" placeholder="请输入联系方式" clearable
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="创建时间" prop="crTime">
        <el-date-picker clearable v-model="queryParams.crTime" type="date" value-format="yyyy-MM-dd"
          placeholder="请选择创建时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="更新时间" prop="upTime">
        <el-date-picker clearable v-model="queryParams.upTime" type="date" value-format="yyyy-MM-dd"
          placeholder="请选择更新时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="备用字段1" prop="backField1">
        <el-input v-model="queryParams.backField1" placeholder="请输入备用字段1" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="备用字段2" prop="backField2">
        <el-input v-model="queryParams.backField2" placeholder="请输入备用字段2" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="备用字段3" prop="backField3">
        <el-input v-model="queryParams.backField3" placeholder="请输入备用字段3" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="备用字段4" prop="backField4">
        <el-input v-model="queryParams.backField4" placeholder="请输入备用字段4" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="备用字段5" prop="backField5">
        <el-input v-model="queryParams.backField5" placeholder="请输入备用字段5" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['store:chargeBack:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
          v-hasPermi="['store:chargeBack:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['store:chargeBack:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['store:chargeBack:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="chargeBackList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="订单编号" align="center" prop="orderSerial" />
      <el-table-column label="退单编号" align="center" prop="backSerial" />
      <el-table-column label="商品标题" width="200" align="center">
        <template slot-scope="scope">
          <div>{{scope.row.chargeBackBodyList[0].backProductName}}</div>
        </template>
      </el-table-column>

      <el-table-column label="商品图片" align="center" prop="upTime" width="180">
        <template slot-scope="scope">
          <el-image style="width: 200px; height: 100px" :src="scope.row.chargeBackBodyList[0].backMainPic"
            fit="contain"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="商品金额" align="center">
        <template slot-scope="scope">
          <div>{{scope.row.chargeBackBodyList[0].salePrice}}</div>
        </template>
      </el-table-column>
      <el-table-column label="商品数量" align="center">
        <template slot-scope="scope">
          <div>{{scope.row.chargeBackBodyList[0].backProductNum}}</div>
        </template>
      </el-table-column>
      <el-table-column label="实付金额" align="center" prop="refundAmount" />

      <el-table-column label="售后方式" align="center" prop="orderType">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.back_order_type" :value="scope.row.orderType"/>
        </template>
      </el-table-column>
      <el-table-column label="售后原因" align="center" prop="backProductRemarks" />
      <el-table-column label="售后描述" align="center" prop="backRemark" />
      <el-table-column label="凭证" align="center" prop="backPic" >

      <template slot-scope="scope">
          <el-image style="width: 200px; height: 100px" :src="scope.row.backPic"
            fit="contain"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="退回快递公司" align="center" prop="emsCompany" />
      <el-table-column label="退回快递单号" align="center" prop="emsSerial" />


      <el-table-column label="退款状态" align="center" prop="backStatus">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.back_status" :value="scope.row.backStatus"/>
        </template>
      </el-table-column>

      <el-table-column label="退单金额" align="center" prop="realAmount" />
      <el-table-column label="备注" align="center" prop="examRemark" />
      <el-table-column label="创建时间" align="center" width="150" prop="crTime">
      <template slot-scope="scope">
          <span>{{ parseTime(scope.row.crTime, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" width="150" prop="upTime" />

      <el-table-column fixed="right" width="250" label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="examUpdate(scope.row)"
            v-hasPermi="['store:chargeBack:edit']">审核</el-button>
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['store:chargeBack:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
            v-hasPermi="['store:chargeBack:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改退单对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="退款金额" prop="refundAmount">
          <el-input v-model="form.refundAmount" placeholder="请输入退款金额" />
        </el-form-item>
        <el-form-item label="实际金额" prop="realAmount">
          <el-input v-model="form.realAmount" placeholder="请输入实际金额" />
        </el-form-item>
        <el-form-item label="商品编码" prop="backProductCode">
          <el-input v-model="form.backProductCode" placeholder="请输入商品编码" />
        </el-form-item>
        <el-form-item label="商品名称" prop="backProductName">
          <el-input v-model="form.backProductName" placeholder="请输入商品名称" />
        </el-form-item>
        <el-form-item label="商品数量" prop="backProductNum">
          <el-input v-model="form.backProductNum" placeholder="请输入商品数量" />
        </el-form-item>
        <el-form-item label="商品主图" prop="backMainPic">
          <el-input v-model="form.backMainPic" placeholder="请输入商品主图" />
        </el-form-item>
        <el-form-item label="商品规格" prop="backSpecification">
          <el-input v-model="form.backSpecification" placeholder="请输入商品规格" />
        </el-form-item>
        <el-form-item label="省" prop="province">
          <el-input v-model="form.province" placeholder="请输入省" />
        </el-form-item>
        <el-form-item label="市" prop="city">
          <el-input v-model="form.city" placeholder="请输入市" />
        </el-form-item>
        <el-form-item label="县/区" prop="county">
          <el-input v-model="form.county" placeholder="请输入县/区" />
        </el-form-item>
        <el-form-item label="乡村/街道" prop="village">
          <el-input v-model="form.village" placeholder="请输入乡村/街道" />
        </el-form-item>
        <el-form-item label="收货人" prop="addressUser">
          <el-input v-model="form.addressUser" placeholder="请输入收货人" />
        </el-form-item>
        <el-form-item label="联系方式" prop="addressPhone">
          <el-input v-model="form.addressPhone" placeholder="请输入联系方式" />
        </el-form-item>
        <el-form-item label="逻辑删除" prop="delFlag">
          <el-input v-model="form.delFlag" placeholder="请输入逻辑删除" />
        </el-form-item>
        <el-form-item label="创建时间" prop="crTime">
          <el-date-picker clearable v-model="form.crTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择创建时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="更新时间" prop="upTime">
          <el-date-picker clearable v-model="form.upTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择更新时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备用字段1" prop="backField1">
          <el-input v-model="form.backField1" placeholder="请输入备用字段1" />
        </el-form-item>
        <el-form-item label="备用字段2" prop="backField2">
          <el-input v-model="form.backField2" placeholder="请输入备用字段2" />
        </el-form-item>
        <el-form-item label="备用字段3" prop="backField3">
          <el-input v-model="form.backField3" placeholder="请输入备用字段3" />
        </el-form-item>
        <el-form-item label="备用字段4" prop="backField4">
          <el-input v-model="form.backField4" placeholder="请输入备用字段4" />
        </el-form-item>
        <el-form-item label="备用字段5" prop="backField5">
          <el-input v-model="form.backField5" placeholder="请输入备用字段5" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- append-to-body -->
    <el-dialog :title="tkTitle" custom-class="outerDialog" :visible.sync="refundDialogVisible"
      :modal-append-to-body="false" width="50%">
      <el-form label-width="120px" :model="refundForm">
        <el-form-item label="商品标题">
          <el-input disabled v-model="refundForm.backProductName"></el-input>
        </el-form-item>
        <el-form-item label="商品数量">
          <el-input disabled v-model="refundForm.backProductNum"></el-input>
        </el-form-item>
        <el-form-item label="售后方式">
          <el-input disabled v-model="refundForm.orderType"></el-input>
        </el-form-item>
        <el-form-item label="售后原因">
          <el-input disabled v-model="refundForm.backProductRemarks"></el-input>
        </el-form-item>
        <el-form-item label="售后描述凭证">
          <ul class="image-list">
            <li v-for="(item, index) in refundForm.backPicList" :key="index">
              <el-image style="width: 200px; height: 100px" :src="item" fit="contain"></el-image>
            </li>
          </ul>
        </el-form-item>
        <el-form-item label="退回快递公司">
          <el-input disabled v-model="refundForm.emsCompany"></el-input>
        </el-form-item>
        <el-form-item label="退回快递单号">
          <el-input disabled v-model="refundForm.emsSerial"></el-input>
        </el-form-item>
        <el-form-item label="退款金额">
          <el-input v-model="refundForm.realAmount"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="remark"></el-input>
        </el-form-item>
      </el-form>
      <!-- 退款 -->
      <div v-if="form.orderType === '0'" slot="footer" class="dialog-footer">
        <el-button type="primary" @click="innerVisible=true">确认打款</el-button>
        <el-button @click="bhInnerVisible=true">驳回</el-button>
      </div>
      <!-- 退货退款 -->
      <div v-else-if="form.orderType === '1'" slot="footer" class="dialog-footer">
        <div v-if="form.backStatus==='0'">
          <el-button type="primary" @click="passExam">通过审核</el-button>
          <el-button @click="bhInnerVisible=true">驳回</el-button>
        </div>
        <div v-else-if="form.backStatus==='5'">
          <el-button type="primary" @click="innerVisible=true">确认打款</el-button>
          <el-button @click="bhInnerVisible=true">驳回</el-button>
        </div>
        <div v-else>
        </div>
      </div>
      <div v-else></div>

      <el-dialog width="20%" title="提示" :append-to-body="true" :visible.sync="innerVisible">
        <div>请确认是否执行打款操作，一旦确认，款项将直接退款给用户</div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="refundConfirmPayment">确定</el-button>
          <el-button @click="innerVisible=false">取消</el-button>
        </span>
      </el-dialog>
      <el-dialog width="50%" title="驳回原因" :append-to-body="true" :visible.sync="bhInnerVisible">
        <el-form label-width="120px">
          <el-form-item label="驳回原因">
            <el-input type="textarea" v-model="remark"></el-input>
          </el-form-item>
          <el-form-item label="驳回图片" prop="pLroductUrl">
          <el-upload class="upload-demo" action="" :on-preview="handlePreviewN" :on-remove="handleRemoveN" ref="upload"
            :before-remove="beforeRemoveN" :auto-upload="false" :multiple="isMultiple" :limit="limitNum" :on-change="fileChange"
            :on-success="handle_successN" :on-exceed="handleExceedN" :file-list="fileListN">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <ul class="image-list">
            <li v-for="(item, index) in listNew" :key="index">
              <el-image style="width: 100px" :src="item.url" fit="fill"></el-image>
                    <span style="font-size: 16px;" @click="deleteImage(index)">x</span>
            </li>
          </ul>
        </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="refundbhConfirmPayment">确定</el-button>
          <el-button @click="bhInnerVisible=false">取消</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import {
    uploadImages,
    fileDeleteOss,
  } from "@/api/system/user";
  import {
    listChargeBack,
    getChargeBack,
    delChargeBack,
    addChargeBack,
    updateChargeBack,
    chargeBack
  } from "@/api/store/chargeBack";

  export default {
    name: "ChargeBack",
    dicts: ['back_status', 'back_order_type',],
    data() {
      return {
        // isMultiple:
        isMultiple:true,
        limitNum:7,
        bhInnerVisible: false,
        refundDialogVisible: false,
        returnAndRefundDialogVisible: false,
        // 遮罩层
        innerVisible: false,
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 退单表格数据
        chargeBackList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          refundAmount: null,
          realAmount: null,
          backStatus: null,
          backProductCode: null,
          backProductName: null,
          backProductNum: null,
          backMainPic: null,
          backSpecification: null,
          province: null,
          city: null,
          county: null,
          village: null,
          addressUser: null,
          addressPhone: null,
          crTime: null,
          upTime: null,
          backField1: null,
          backField2: null,
          backField3: null,
          backField4: null,
          backField5: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        // 退款
        refundForm: {
          backProductName: null, //商品标题
          backProductNum: null, //商品数量
          orderType: null, //售后方式 （外层）
          backProductRemarks: null, //售后原因
          backRemark: null, //售后描述凭证   文字backRemark（外层）
          backPic: null, // 图片backPic（外层）
          realAmount: null, //退款金额  （外层）
          examRemark: null, //备注：手输入的内容
          emsCompany:null,
          emsSerial:null,
          backPicList: []
        },
        refundParams: {},
        refundTkParams: {},
        tkTitle: '',
        listNew:[],
        fileListN:[],
        // 区分退货还是退货退款
        thOrThtk:'',
        // 区分是通过审核还是确认打款
        tktkExam:'',
        remark:'',
        formCopy: {}
      };
    },
    created() {
      this.getList();
    },
    methods: {

      deleteImage(index) {
        let res = this.listNew[index].url
        const data = {
          'fileName': res
        }
        fileDeleteOss(data).then(response => {
          if (response.code == '200') {
            this.listNew.splice(index, 1)
            this.$modal.msgSuccess("删除成功");
          }
        });

      },
      fileChange(file, fileList) {
        this.xlsFile = fileList
      },
      submitUpload() {
        if(this.xlsFile.length<=0){
          this.$modal.msgSuccess("请先选取图片");
          return
        }
        const newArr = this.xlsFile.map(item => {
          return item.raw
        });
        let formData = new FormData();
        newArr.forEach((file, index) => {
          formData.append(`file[${index}]`, file);
        });
        uploadImages(formData).then(response => {
          if (response.code == '200') {
            let data = response.data
            this.listNew = [...this.listNew,...data]
            this.xlsFile = []
            this.fileListN = []
          }
        });
      },
      handlePreviewN() {},
      handleRemoveN() {},
      beforeRemoveN() {},
      handle_successN(res) {
        console.log('图片上传成功')
      },
      handleExceedN() {},
      getCurrentDateTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = (now.getMonth() + 1).toString().padStart(2, '0');
        const day = now.getDate().toString().padStart(2, '0');
        const hours = now.getHours().toString().padStart(2, '0');
        const minutes = now.getMinutes().toString().padStart(2, '0');
        const seconds = now.getSeconds().toString().padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
      },
      // 通过审核
      passExam(){

        // if (!this.formCopy.realAmount) {
        //    this.$modal.msgError("请输入退款金额");
        //    return;
        // }
        // if (this.refundForm.realAmount>this.formCopy.realAmount) {
        //    this.$modal.msgError("退款金额不能大于订单金额");
        //    return;
        // }

        let backStatusW = ''
        let backStatusInner = ''
        if (this.form.orderType === '0') {
            backStatusW = '1'
            backStatusInner = '1'
          } else if (this.form.orderType === '1') {

            // 第一个框
            if(this.form.backStatus==='0'){
              backStatusW = '1'
              backStatusInner = '1'
            } else if(this.form.backStatus==='5'){
              backStatusW = '3'
              backStatusInner = '4'
            } else {

            }
            // 第二个框

            
          } else {

          }

        let params = {
          "backSerial": this.form.backSerial,
          "orderSerial": this.form.orderSerial,
          "refundAmount": this.form.refundAmount,
          "realAmount": this.refundForm.realAmount,
          "backStatus": backStatusW,
          "examRemark": this.remark,
          "orderType": this.form.orderType,
          "upTime": this.getCurrentDateTime(),  //
          "examPic":'',
          "chargeBackBodyList": {
            "backBodyId": this.form.chargeBackBodyList[0].backBodyId,
            "inventoryId": this.form.chargeBackBodyList[0].inventoryId,
            "backSerial": this.form.backSerial,
            "refundAmount": this.form.chargeBackBodyList[0].refundAmount,
            "backStatus": backStatusInner,
            "backProductRemarks": this.form.chargeBackBodyList[0].backProductRemarks,
            "backProductCode": this.form.chargeBackBodyList[0].backProductCode,
            "backProductName":this.form.chargeBackBodyList[0].backProductName,
            "backProductNum": this.form.chargeBackBodyList[0].backProductNum,
            "backSpecification": this.form.chargeBackBodyList[0].backSpecification,
            "upTime": this.getCurrentDateTime(),   //
            "salePrice": this.form.chargeBackBodyList[0].salePrice
          }
        }

        chargeBack(params).then(response => {
          this.refundDialogVisible = false
          this.bhInnerVisible = false
          this.getList();
        });
      },

      //确认打款
      refundConfirmPayment() {


        // if (!this.formCopy.realAmount) {
        //    this.$modal.msgError("请输入退款金额");
        //    return;
        // }
        // if (this.refundForm.realAmount>this.formCopy.realAmount) {
        //    this.$modal.msgError("退款金额不能大于订单金额");
        //    return;
        // }

        // 金额限制 >0 小于<=订单金额
        let backStatusW = ''
        let backStatusInner = ''
        if (this.form.orderType === '0') {
            backStatusW = '1'
            backStatusInner = '1'
          } else if (this.form.orderType === '1') {
            // 第一个框
            if(this.form.backStatus==='0'){
              backStatusW = '1'
              backStatusInner = '1'
            } else if(this.form.backStatus==='5'){
              backStatusW = '3'
              backStatusInner = '4'
            } else {

            }
          } else {

          }

        let params = {
          "backSerial": this.form.backSerial,
          "orderSerial": this.form.orderSerial,
          "refundAmount": this.form.refundAmount,
          "realAmount": this.refundForm.realAmount,
          "backStatus": backStatusW,
          "examRemark": this.remark,
          "orderType": this.form.orderType,
          "upTime": this.getCurrentDateTime(),  //
          "examPic":'',
          "chargeBackBodyList": {
            "backBodyId": this.form.chargeBackBodyList[0].backBodyId,
            "inventoryId": this.form.chargeBackBodyList[0].inventoryId,
            "backSerial": this.form.backSerial,
            "refundAmount": this.form.chargeBackBodyList[0].refundAmount,
            "backStatus": backStatusInner,
            "backProductRemarks": this.form.chargeBackBodyList[0].backProductRemarks,
            "backProductCode": this.form.chargeBackBodyList[0].backProductCode,
            "backProductName":this.form.chargeBackBodyList[0].backProductName,
            "backProductNum": this.form.chargeBackBodyList[0].backProductNum,
            "backSpecification": this.form.chargeBackBodyList[0].backSpecification,
            "upTime": this.getCurrentDateTime(),   //
            "salePrice": this.form.chargeBackBodyList[0].salePrice
          }
        }
        chargeBack(params).then(response => {
          this.refundDialogVisible = false
          this.bhInnerVisible = false
          this.innerVisible = false
          this.getList();
        });
      },
      // 驳回
      refundbhConfirmPayment() {

        // if (!this.formCopy.realAmount) {
        //    this.$modal.msgError("请输入退款金额");
        //    return;
        // }
        // if (this.refundForm.realAmount>this.formCopy.realAmount) {
        //    this.$modal.msgError("退款金额不能大于订单金额");
        //    return;
        // }


        let imageParams = this.listNew.map(v=>v.url)
        let imageStr = ''
        if(imageParams.length>0){
          imageStr = imageParams.join(',')
        }
        let backStatusW = ''
        let backStatusInner = ''
        if (this.form.orderType === '0') {
            // this.tkTitle = "退款";
            backStatusW = '2'
            backStatusInner = ''
          } else if (this.form.orderType === '1') {
            // 第一个框
            if(this.form.backStatus==='0'){
              backStatusW = '2'
              backStatusInner = ''
            } else if(this.form.backStatus==='5'){
               backStatusW = '7'
               backStatusInner = '5'
            } else {

            }
            // this.tkTitle = "退货退款";           
          } else {

          }

        let params = {
          "backSerial": this.form.backSerial,
          "orderSerial": this.form.orderSerial,
          "refundAmount": this.form.refundAmount,
          "realAmount": this.refundForm.realAmount,
          "backStatus": backStatusW,
          "examRemark": this.remark,
          "orderType": this.form.orderType,
          "upTime": this.getCurrentDateTime(),  //
          "examPic":imageStr,
          "chargeBackBodyList": {
            "backBodyId": this.form.chargeBackBodyList[0].backBodyId,
            "inventoryId": this.form.chargeBackBodyList[0].inventoryId,
            "backSerial": this.form.backSerial,
            "refundAmount": this.form.chargeBackBodyList[0].refundAmount,
            "backStatus": backStatusInner,
            "backProductRemarks": this.form.chargeBackBodyList[0].backProductRemarks,
            "backProductCode": this.form.chargeBackBodyList[0].backProductCode,
            "backProductName":this.form.chargeBackBodyList[0].backProductName,
            "backProductNum": this.form.chargeBackBodyList[0].backProductNum,
            "backSpecification": this.form.chargeBackBodyList[0].backSpecification,
            "upTime": this.getCurrentDateTime(),   //
            "salePrice": this.form.chargeBackBodyList[0].salePrice
          }
        }
        chargeBack(params).then(response => {
          this.refundDialogVisible = false
          this.bhInnerVisible = false
          this.getList();
        });
      },
      /** 查询退单列表 */
      getList() {
        this.loading = true;
        listChargeBack(this.queryParams).then(response => {
          this.chargeBackList = response.data;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          backSerial: null,
          refundAmount: null,
          realAmount: null,
          backStatus: null,
          backProductCode: null,
          backProductName: null,
          backProductNum: null,
          backMainPic: null,
          backSpecification: null,
          province: null,
          city: null,
          county: null,
          village: null,
          addressUser: null,
          addressPhone: null,
          delFlag: null,
          crTime: null,
          upTime: null,
          backField1: null,
          backField2: null,
          backField3: null,
          backField4: null,
          backField5: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.backSerial)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加退单";
      },
      // 审核
      examUpdate(row) {
        console.log(row, 'row34234')
        this.reset();
        const backSerial = row.backSerial || this.ids
        getChargeBack(backSerial).then(response => {
          this.form = response.data;
          this.formCopy = JSON.parse(JSON.stringify(this.form))

          if (this.form.orderType === '0') {
            this.tkTitle = "退款";
          } else if (this.form.orderType === '1') {
            this.tkTitle = "退货退款";
          } else {

          }
          this.refundDialogVisible = true
          let list = this.form.chargeBackBodyList
          this.refundForm.backProductName = list[0].backProductName ////商品标题
          this.refundForm.backProductNum = list[0].backProductNum //商品数量
          this.refundForm.orderType = this.form.orderType //售后方式 （外层）
          this.refundForm.backProductRemarks = list[0].backProductRemarks //售后原因
          this.remark = this.form.backRemark
          this.refundForm.backRemark = this.form.backRemark //售后描述凭证  (外层)
          this.refundForm.backPic=this.form.backPic  //文字backRemark（外层）
          if(this.refundForm.backPic){
            this.refundForm.backPicList = this.refundForm.backPic.split(',')
          }
          
          this.refundForm.realAmount = this.form.realAmount
          this.refundForm.emsCompany = this.form.emsCompany
          this.refundForm.emsSerial = this.form.emsSerial
        });
      },

      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const backSerial = row.backSerial || this.ids
        getChargeBack(backSerial).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改退单";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.backSerial != null) {
              updateChargeBack(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addChargeBack(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const backSerials = row.backSerial || this.ids;
        this.$modal.confirm('是否确认删除退单编号为"' + backSerials + '"的数据项？').then(function() {
          return delChargeBack(backSerials);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('store/chargeBack/export', {
          ...this.queryParams
        }, `chargeBack_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
<style scoped lang="scss">
  .outerDialog {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .image-list {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;

    li {
      width: 150px;
      max-height: 150px;
      margin-right: 3%;
      overflow: hidden;
      position: relative;

      span {
        position: absolute;
        right: 0px;
        top: 0px;
        cursor: pointer;
      }
    }
  }
</style>
